<html>
	<head>
		<title>Mon-tagger</title>
		<link rel="stylesheet" 
			href="static/supersized/3.2.1/css/supersized.css" 
			type="text/css" media="screen"/>
		<link rel="stylesheet" 
			href="static/supersized/3.2.1/theme/supersized.shutter.css" 
			type="text/css" media="screen"/>
		<link rel="stylesheet" href="static/css/montagger.css" type="text/css" media="screen"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
		<script type="text/javascript" src="static/supersized/3.2.1/js/jquery.easing.min.js"></script>
		<script type="text/javascript" src="static/supersized/3.2.1/js/supersized.3.2.1.min.js"></script>
		<script type="text/javascript" src="static/supersized/3.2.1/theme/supersized.shutter.min.js"></script>
		<script type="text/javascript">
			imageLinks = [];
			{% for photo in photos %}
			imageLinks.push({
				image:"{{photo.0}}",
				title:"Number {{forloop.revcounter}} with {{photo.1}} {{type}}"
			});
			{% endfor %} 
			$(function(){
				$.supersized({
					slide_interval:3000,
					transition:3,
					transition_speed:700,
					slide_links:false,
					horizontal_center:1,
					fit_always:1,
					slides : imageLinks
				});
				vars.image_path="static/supersized/3.2.1/img/";
			});
		</script>
	</head>
	<body>
		<div id="infoOverlay">
		<h1>Mon-tagger</h1>
		<ul>
		<li>
		<a href="http://mon-tagger.appspot.com">Create Another Slideshow</a>
		</li>
		<li>
		<a href="http://www.facebook.com/dialog/feed?
				app_id=202700846420322&
				link={{url}}&
				name=Mon-Tagger&
				message=Take%20a%20look%20at%20my%20top%20ten%20photos%20based%20on%20{{type}}!&
				redirect_uri={{url}}&
				description=A%20project%20for%20CSE463%20at%20ASU">
			Share via Facebook
		</a>
		</li>
		</ul>
		</div>
		<a id="prevslide" class="load-item"></a>
		<a id="nextslide" class="load-item"></a>
		<div id="progress-back" class="load-item">
			<div id="progress-bar"></div>
		</div>
		<div id="controls-wrapper" class="load-item">
			<div id="controls">
				<a id="play-button">
					<img id="pauseplay" src="static/supersized/3.2.1/img/pause.png"/>
				</a>
				<div id="slidecaption"></div>
				<ul id="slide-list"></ul>
			</div>
		</div>
	</body>
</html>
